<script src="javascripts/filter.js"></script>
<style>
    .bd-aside {
        padding: .1875rem .5rem;
        float: left;
        margin-top: .125rem;
        margin-left: .3125rem;
        color: rgba(0, 0, 0, .65);
        text-decoration: none;
        padding-top: 4rem;
    }

    @media (min-width: 768px) {
        .bd-placeholder-img-lg {
            font-size: 3.5rem;
        }
    }
</style>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
    <form action="/search">
        <p>Breed</p>
        <div class="form-check">
            <input class="form-check-input breed" type="checkbox" value="Cat" name="breed" id="cat">
            <label class="form-check-label" for="cat">
                Cat
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input breed" type="checkbox" value="Alpaca" name="breed" id="alpaca">
            <label class="form-check-label" for="alpaca">
                Alpaca
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input breed" type="checkbox" value="Dog" name="breed" id="dog">
            <label class="form-check-label" for="dog">
                Dog
            </label>
        </div>
        <br>
        <p>Location</p>
        <div class="form-check">
            <input class="form-check-input location" type="checkbox" value="London" name="location" id="London">
            <label class="form-check-label" for="London">
                London
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input location" type="checkbox" value="Sheffield" name="location" id="Sheffield">
            <label class="form-check-label" for="Sheffield">
                Sheffield
            </label>
        </div>
    </form>


</aside>